<template >
  
      <div class="loading_container" v-loading="loading" element-loading-text="加载中...">
        <div class="header">
          <div class="btn_group">
            <router-link to="/commodity/addbrand">
              <HPlainButton>添加品牌</HPlainButton>
            </router-link>
            <el-dropdown trigger="click">
              <HButton :disabled="selecttion.length == 0">
                批量操作
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </HButton>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="useAll">
                    <el-icon>
                      <CircleCheck />
                    </el-icon>
                    批量启用
                  </el-dropdown-item>
                  <el-dropdown-item @click="disableAll">
                    <el-icon>
                      <Warning />
                    </el-icon>
                    批量禁用
                  </el-dropdown-item>
                  <el-dropdown-item @click="deleAll">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    批量删除
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="search">
            <el-input
              v-model="code"
              placeholder="编码搜索"
              class="input-with"
              clearable
              style="width: 160px;"
              @keyup.enter="searchList"
              @clear="getList"
            >
            </el-input>
            <el-input
              v-model="name"
              placeholder="名称搜索"
              class="input-with"
              clearable
              style="width: 160px;"
              @keyup.enter="searchList"
              @clear="getList"
            >
            </el-input>
            <HButton type="primary" @click="searchList">
              <el-icon>
                <Search />
              </el-icon>
              搜索
            </HButton>
          </div>
        </div>
        <div class="table_list">
          <el-table
            border
            stripe
            resizable
            :data="tableData"
            ref="tableList"
            @selection-change="handleChange"
            height="100%"
            @row-dblclick="viewDetail"
            style="position: absolute"
          >
            <el-table-column show-overflow-tooltip type="selection" width="40" fixed />
  
            <!-- 序号 -->
            <el-table-column
              show-overflow-tooltip
              type="index"
              label="序号"
              width="50"
              fixed
            />
  
            <!-- 品牌名称 -->
            <el-table-column show-overflow-tooltip prop="name" label="品牌名称" width="200" fixed>
              <template #default="scope">
                <HLink @click="viewDetail(scope.row)">{{ scope.row.name }}</HLink>
              </template>
            </el-table-column>
  
            <!-- 品牌编码 -->
            <el-table-column show-overflow-tooltip prop="code" label="品牌编码" width="250" />
  
            <!-- 状态 -->
            <el-table-column show-overflow-tooltip prop="status" label="状态" width="70">
              <template #default="scope">
                <HStatus v-if="!scope.row.status">启用</HStatus>
                <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
              </template>
            </el-table-column>
  
            <!-- 创建时间 -->
            <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="128" />
  
            <!-- 更新时间 -->
            <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="128" />
  
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="90">
              <template #default="scope">
                <el-space :size="0" :spacer="spacer">
                  <HLink @click="editDetail(scope.row)">修改</HLink>
                  <HLink @click="viewDetail(scope.row)">详细</HLink>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer">
          <Pagination
            ref="pagination"
            :list_total="total"
            @size-change="getSizeList"
            @current-change="getNumList"
          />
        </div>
      </div>
  </template>
  
  <script setup lang="ts">
    import Pagination from '@/components/Pagination/index.vue'
    import { getBrandList, changeBrand, deleBrand } from '@/api/brand'
    import { ref, onMounted, markRaw, h,watch } from 'vue'
    import { ElDivider, ElMessage, ElMessageBox } from 'element-plus'
    import { Search, Delete, Warning, ArrowDown, CircleCheck } from '@element-plus/icons-vue'
    import { useRouter ,useRoute} from 'vue-router'
    import HPlainButton from '@/components/common/button/HPlainButton.vue'
    import HButton from '@/components/common/button/HButton.vue'
    import HLink from '@/components/common/link/HLink.vue'
    import HStatus from '@/components/common/status/HStatus.vue'
  
    // 间距组件的间隔符
    const spacer = h(ElDivider, {
      direction: 'vertical',
      style: 'display: flex; align-items: center;',
    })
    const router = useRouter()
    const route = useRoute()
    const loading = ref(false)
    const pagination = ref()
    const tableList = ref()
    const name = ref('') // 品牌名称
    const code = ref('') // 品牌编码
    const status = ref(true) // 品牌状态
    const tableData = ref([]) // 品牌列表
    const limit = ref() // 每页显示数量
    const page = ref() // 当面页码
    const total = ref()
  
    // 获取品牌列表
    const getList = async () => {
      loading.value = true
      limit.value = pagination.value.size
      page.value = pagination.value.current
      const data = {
        name: name.value,
        code: code.value,
        limit: limit.value,
        page: page.value,
      }
      await getBrandList(data).then((res) => {
        total.value = parseInt(res.data.data.total)
        loading.value = false
        tableData.value = res.data.data.rows
      })
    }
  
    onMounted(() => {
      getList()
    })
  
    // 获取表格选中的数据 1-分类 2-故障库
    const selecttion = ref([])
    const handleChange = (val) => {
      if (val.length != 0) {
        val.forEach((item) => {
          if (selecttion.value.indexOf(item.id) == -1) {
            selecttion.value.push(item.id)
          } else {
            selecttion.value = selecttion.value.filter((i) => i == item.id)
          }
        })
      } else {
        selecttion.value = []
      }
    }
  
    // 批量启用
    const useAll = () => {
      if (selecttion.value.length == 0) {
        ElMessage({
          message: '请选择要启用的品牌',
          type: 'warning',
          duration: 1500,
        })
        return
      }
      ElMessageBox({
        title: '提示',
        message: '确认启用选中的品牌?',
        type: 'warning',
        icon: markRaw(Warning),
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        autofocus: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 0)
            }, 1000)
          } else {
            done()
          }
        },
      }).then(() => {
        changeBrand(selecttion.value, { status: !status.value }).then((res) => {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 1500,
          })
        })
        tableList.value.clearSelection()
        getList()
      })
    }
  
    // 批量禁用
    const disableAll = () => {
      if (selecttion.value.length == 0) {
        ElMessage({
          message: '请选择要禁用的品牌',
          type: 'warning',
          duration: 1500,
        })
        return
      }
      ElMessageBox({
        type: 'warning',
        icon: markRaw(Warning),
        title: '提示',
        message: '确认禁用选中的品牌?',
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 0)
            }, 1000)
          } else {
            done()
          }
        },
      }).then(() => {
        changeBrand(selecttion.value, { status: status.value }).then((res) => {
          ElMessage({
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 1500,
          })
          if (res) {
            if (res.data.code == 20000) {
              selecttion.value = []
              tableList.value.clearSelection()
              getList()
            }
          }
        })
      })
    }
  
    // 批量删除
    const deleAll = () => {
      if (selecttion.value.length == 0) {
        ElMessage({
          message: '请选择要删除的品牌',
          type: 'warning',
          duration: 1500,
        })
        return
      }
      ElMessageBox({
        type: 'error',
        icon: markRaw(Delete),
        title: '提示',
        message: '确认删除选中的品牌?',
        showCancelButton: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            setTimeout(() => {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
              }, 0)
            }, 1000)
          } else {
            done()
          }
        },
      }).then(() => {
        loading.value = true
        deleBrand(selecttion.value).then((res) => {
          ElMessage({
            message: res.data.message,
            type: res.data.success ? 'success' : 'error',
            duration: 1500,
          })
          if (res) {
            if (res.data.code == 20000) {
              selecttion.value = []
              tableList.value.clearSelection()
              getList()
            }
          }
        })
      })
    }
  
    // 修改品牌
    const editDetail = (obj) => {
      router.push({ path: '/commodity/editbrand/' + obj.id })
    }
  
    // 查看详细
    const viewDetail = (obj) => {
      router.push({ path: '/commodity/branddetail/' + obj.id })
    }
  
    // 搜索品牌
    const searchList = () => {
      getList()
    }
  
    // 显示数量改变时
    const getSizeList = () => {
      getList()
    }
  
    // 页码改变时
    const getNumList = () => {
      getList()
    }
    defineExpose({ getList })
  </script>
  
  <style scoped lang="scss">
 .loading_container {
            display: flex;
            flex-direction: column;
            flex: 1;
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin: 12px 0 ;
        
              .btn_group {
                display: flex;
                gap: 5px;
              }
        
              .search {
                display: flex;
                gap: 5px;
              }
            }
        
            .table_list {
             position: relative;
             flex: 1;
             margin: 0 0 12px ;
            }
        
            .footer {
              height: 28px;
              display: flex;
              justify-content: flex-end;
            }
          }

  .form_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  </style>
  